<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="./styles/popup.css"/>
<script type="text/template" id="headTemp">
<div class="version selectable"><b>{{:appName}}</b> v{{version}}</div>
<div class="panel">
	<span class="hosts-path">{{:hostsPath}}</span>
	<input id="hostsPath" class="hosts-editor" value="{{hostsPath}}"/>
	<span class="icon fade link" data-title="{{:link}}" data-handle="link"></span>
	<span class="icon fade refresh" data-title="{{:refresh}}" data-handle="refresh"></span>
	<span class="icon fade import" data-title="{{:import}}" data-handle="imports"></span>
	<span class="icon fade save" data-title="{{:backup}}" data-handle="backup"></span>
	<span class="icon fade add" data-title="{{:addGroup}}" data-handle="addGroup"></span>
	<span class="icon fade show" data-title="{{:current}}" data-handle="current"></span>
</div>
</script>
<script type="text/template" id="groupTemp">
<div class="group node clearfix">
	<div class="name">
		<span class="icon {{enable?checkon:checkoff}}" data-title="{{:checkGroup}}" data-handle="check"></span>
		<span class="selectable" data-title="{{line}}">{{line}}</span>
	</div>
	<div class="ctrl">
		<span class="icon fade add" data-title="{{:addLine}}" data-handle="addLine"></span>
		<span class="icon fade edit" data-title="{{:editGroup}}" data-handle="edit"></span>
		<span class="icon fade import" data-title="{{:importGroup}}" data-handle="imports"></span>
		<span class="icon fade remove" data-title="{{:removeGroup}}" data-handle="remove"></span>
		<span class="icon {{hide?expand:collapse}}" data-handle="expand"></span>
	</div>
</div>
</script>
<script type="text/template" id="lineTemp">
<li class="line node clearfix">
	<div class="ip">
		<span class="icon {{enable?checkon:checkoff}}" data-title="{{:checkLine}}" data-handle="check"></span>
		<span class="selectable" data-title="{{addr}}">{{addr}}</span>
	</div>
	<div class="domain selectable">
		<span data-title="{{hostname}}">{{hostname}}</span>
		<span class="comment" data-title="{{comment}}">{{comment}}</span>
	</div>
	<div class="ctrl">
		<span class="icon fade edit" data-title="{{:editLine}}" data-handle="edit"></span>
		<span class="icon fade remove" data-title="{{:removeLine}}" data-handle="remove"></span>
	</div>
</li>
</script>
<script type="text/template" id="olTemp">
<table>
	<tr>
		<th colspan="2">{{title}}</th>
	</tr>
	{{fields}}
	<tr>
		<td colspan="2" align="center">
			<span class="ol-save" data-handle="olSave">{{:olSave}}</span>
			<span class="ol-cancel" data-handle="olCancel">{{:olCancel}}</span>
		</td>
	</tr>
</table>
</script>
<script type="text/template" id="fieldTemp">
<tr>
	<td align="right">
		<label for="olEditor-{{name}}">{{label}}</label>
	</td>
	<td>
		<input id="olEditor-{{name}}" name="{{name}}" value="{{value}}" placeholder="{{placeholder}}" title="{{placeholder}}"/>
	</td>
</tr>
</script>
<script type="text/template" id="areaFieldTemp">
<tr>
	<td align="right">
		<label for="olEditor-{{name}}">{{label}}</label>
	</td>
	<td>
		<textarea id="olEditor-{{name}}" name="{{name}}">{{value}}</textarea>
	</td>
</tr>
</script>
</head>
<body>
<div id="mask"><div id="overlay"></div></div>
<div id="titleTip" class="hidden"></div>
<div id="errorTip" class="hidden"><span></span><span class="icon close" data-handle="close"></span></div>
<div id="infoTip" class="hidden">
	<span></span>
	<span class="icon confirm" data-handle="confirm"></span>
	<span class="icon close" data-handle="close"></span>
</div>
<div id="content"></div>
<div id="groupFilter"></div>
<div id="currentIP"></div>
<script src="./scripts/lib/jquery.js"></script>
<script src="./scripts/lib/sea.js" id="seajsnode" data-main="./scripts/init.js"></script>
</body>
</html>
